﻿// Namespace LyncServerExtension.UI: UI related functions.

// Namespace creation, and protection against global environment modification.
LyncServerExtension.UI = (function (ns) {
    // User view id to allow a mapping between user view objects and user view jquery objects.
    ns._UserViewCounter = 0;

    // "Class" to represents a user view bound to the given model.
    ns.UserView = function (model) {
        var _id = ++ns._UserViewCounter,
            _photo = $('<img/>'),
            _qobject = $('<div id="' + _id + '" class="userView">' +
                            '<div class="userView-photo">' +
                            '</div>' +
                            '<div class="userView-info">' +
                            '<div class="userView-title">' + model.getFirstName() + ' ' + model.getLastName() + '</div>' +
                            '<div class="userView-subtitle">' + model.getSip() + '</div>' +
                        '</div>' +
                      '</div>');

        _photo.attr('src', model.getPhoto());
        _photo.error(function () {
            $(this).attr('src', 'Image/DefaultPhoto.jpg');
        });
        _qobject.children('.userView-photo').append(_photo);

        // Getters.
        this.getId = function () { return _id; }
        this.getModel = function () { return model; }

        // Gets the underlying jquery object.
        this.toQObject = function () { return _qobject; }
    }

    // Function to allow a drag and drop session for draggables jquery objects to droppables jquery objects.
    ns.startDragAndDrop = function (draggables, droppables) {
        var offset = null;
        var dragged = null;

        draggables.css({ cursor: 'move' });
        draggables.mousedown(onMouseDown);

        function onMouseDown(ev) {
            var e = ev || window.event;

            dragged = this;
            $(dragged).css('position', 'absolute');
            $(document).mousemove(onMouseMove);
            var currentOffset = $(dragged).offset();
            offset = { left: e.clientX - currentOffset.left, top: e.clientY - currentOffset.top };
            droppables.trigger('dragged', [dragged]);
        }

        $(document).mouseup(onMouseUp);

        function onMouseUp() {
            if (dragged == null)
                return;

            var dragged_ = dragged,
            dragOffset = $(dragged_).offset(),
            dragSize = { width: $(dragged).width(), height: $(dragged).height() };

            $(document).unbind('mousemove', onMouseMove);
            dragged = null;

            droppables.each(function () {
                var dropOffset = $(this).offset();
                var dropSize = { width: $(this).width(), height: $(this).height() };

                if (((dragOffset.left >= dropOffset.left) && (dragOffset.top >= dropOffset.top)) &&
                    (((dragOffset.left + dragSize.width) <= (dropOffset.left + dropSize.width))) &&
                    ((dragOffset.top + dragSize.height) <= (dropOffset.top + dropSize.height))) {
                    $(this).trigger('droppedIn', [dragged_]);
                    $(dragged_).css({ position: 'relative', left: '0px', top: '0px' });
                    $(this).append($(dragged_));
                    return;
                }
                $(dragged_).css('position', 'relative');
                $(this).trigger('droppedOut', [dragged_]);
            });
        }

        function onMouseMove(ev) {
            var e = ev || window.event;
            $(dragged).offset({ left: e.clientX - offset.left, top: e.clientY - offset.top });
        }

        // Function to stop the previously set drag and drop session.
        ns.stopDragAndDrop = function () {
            draggables.css({ cursor: 'default' });
            draggables.unbind('mousedown', onMouseDown);
            $(document).unbind('mousemove', onMouseMove);
            $(document).unbind('mouseup', onMouseUp);
        }
    }

    // Function to fade toggle the visibility of a list first "count" items,
    // and simply toggling visibility to others.
    ns.fadeToggleItems = function (ls, count, duration, cont) {
        function loop(i) {
            if ((i == ls.length) || (i > 8)) {

                ls.slice(i).toggle();
                if (cont) cont();
                return;
            }

            $(ls[i]).fadeToggle(duration, function () { loop(i + 1); });
        }

        loop(0);
    }

    return ns;
})({});

